<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id='div'>
      <p id='p'>
          <span id='span'>Click Me!</span>
      </p >
  </div>
  <script lang="javascript">

   var div = document.getElementById('div')
   var p = document.getElementById('p')
   function onClickFn(event){
    var tagName = event.currentTarget.tagName;
    var phase = event.eventPhase;
    console.log(tagName,phase);
   }
  // true和false时查看不同效果
   div.addEventListener('click',onClickFn,true)
   p.addEventListener('click',onClickFn,true)
  

  // 事件冒泡的应用 
  // 事件委托：由于事件会在冒泡阶段向上传播到父节点，因此可以把子节点的监听函数定义在父节点上，由父节点的监听函数统一处理多个子节点的事件。


  </script>
</body>
</html>